<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <map-charts></map-charts>
        <div>
          <title-card title="引入echarts"></title-card>
          <pre-code :code="`  npm install echarts`" language="bash" />
          
          <title-card title="地图文件下载地址"></title-card>
          <p>
            &nbsp;&nbsp;
            <span>阿里云数据可视化平台 </span>
            <a
              href="https://introjs.com/docs"
              target="_blank"
              >https://introjs.com/docs</a
            >
          </p>
          <title-card title="创建地图JSON文件夹"></title-card>
          <p>
            &nbsp;&nbsp;
            <span> 我的存放位置为：src/assets/mapJson </span>
          </p>
          <title-card title="创建地图JSON动态引入文件 maputil.js"></title-card>
          &nbsp;&nbsp;
          <span> 我的存放位置为：src/utils/maputil.js </span>
          <pre-code :code="maputil" language="JavaScript" />
          
          <title-card title="地图下钻"></title-card>
          <pre-code :code="mapChange" language="JavaScript" />
          
          <title-card title="返回上一级"></title-card>
          <pre-code :code="toBack" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="EchartsMap">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from "@/components/TitleCard/index.vue"
import MapCharts from './MapCharts/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';
const maputil = ref(`import zhongguo from "@/assets/mapJson/data-city.json";
import beijing from "@/assets/mapJson/data-beijing.json";
import bjmiyun from "@/assets/mapJson/data-bjmiyun.json";
import zhejiang from "@/assets/mapJson/data-zhejiang.json";
import huzhou from "@/assets/mapJson/data-huzhou.json";
import jiaxing from "@/assets/mapJson/data-jiaxing.json";
import hangzhou from "@/assets/mapJson/data-hangzhou.json";
import shaoxing from "@/assets/mapJson/data-shaoxing.json";
import ningbo from "@/assets/mapJson/data-ningbo.json";
import zhoushan from "@/assets/mapJson/data-zhoushan.json";
import quzhou from "@/assets/mapJson/data-quzhou.json";
import jinhua from "@/assets/mapJson/data-jinhua.json";
import taizhou from "@/assets/mapJson/data-taizhou.json";
import lishui from "@/assets/mapJson/data-lishui.json";
import wenzhou from "@/assets/mapJson/data-wenzhou.json";
// ...

const mapDict = {
  "浙江省": "zhejiang",
  "湖州市": "huzhou",
  "嘉兴市": "jiaxing",
  "杭州市": "hangzhou",
  "绍兴市": "shaoxing",
  "宁波市": "ningbo",
  "舟山市": "zhoushan",
  "衢州市": "quzhou",
  "金华市": "jinhua",
  "台州市": "taizhou",
  "丽水市": "lishui",
  "温州市": "wenzhou",
  // ...
}

const mapData = {
  beijing,
  bjmiyun,
  zhejiang,
  huzhou,
  jiaxing,
  hangzhou,
  shaoxing,
  ningbo,
  zhoushan,
  quzhou,
  jinhua,
  taizhou,
  lishui,
  wenzhou
  // ...
}

export function getMap(mapName) {
  const cityName = mapDict[mapName]
  if(cityName){
    return [cityName, mapData[cityName]]
  }
  return []
}
`);
const mapChange = ref(`import { getMap } from '@/utils/maputil.js';

// 初始化
const initCharts = () => {
  const charts = echarts.init(chartsRef.value);
  // 不传name默认会返回默认地图
  mapChange(mapName.value);
  // 注意这里是echarts的实例对象，而不是echarts组件本身。
  charts.on('click', (e) => {
    let name = e.name;
    if (getMap(name)[0] != mapName.value && newMap.value != name) {
      level.value++;
      mapChange(name);
    }
    // 重新渲染
    charts.setOption(option.value, true);
  });
  // 重新渲染
  charts.setOption(option.value, true);
};
// 根据名称获取JSON数据
const mapChange = (name) => {
  mapBus.value[level.value] = name;
  newMap.value = name;
  let mapName, mapJson;
  //区级判断过滤
  if (level.value == 3) {
    [mapName, mapJson] = getMap(mapBus.value[2]);
    let arr = mapJson.features;
    arr = arr.filter((item) => {
      return item.properties.name == name;
    });
    let obj = {
      type: 'FeatureCollection',
      features: arr,
    };
    mapJson = obj;
  } else {
    [mapName, mapJson] = getMap(name);
  }

  option.value.geo.map = mapName;
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap(mapName, mapJson);
};
`)
const toBack = ref(`// mapBus 储存点击记录
const toBack = () => {
  const charts = echarts.init(chartsRef.value);
  level.value--;
  mapChange(mapBus.value[level.value]);
  // 重新渲染
  charts.setOption(option.value, true);
};`)
const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'EchartsMap',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
